<template>
  <div>
    <NavBar>
      <div slot="logo">校园＆生活</div>
      <nav-bar-item>
        <template slot="nav-item">
          <router-link :to="{ name: 'home' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center">Home</router-link>

          <router-link :to="{ name: 'amusement' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center">Amusement</router-link>

          <router-link :to="{ name: 'partyHistory' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center">partyHistory
          </router-link>

          <router-link :to="{ name: 'about' }"
            class="nav-item nav-link  text-light fs-5 bi mylink  fs-5  hvr-underline-from-center  ">About Us
          </router-link>
        </template>

        <template v-slot:login>
          <button v-if="!$store.getters.getToken" class="btn btn-outline-primary mx-1 login" @click="login">
            登陆
          </button>
          <div v-if="$store.getters.getToken" class="uers d-flex justify-content-center align-item-center">
            <div class="block mx-3 d-none d-md-block ">
              <el-avatar :size="50" :src="$store.getters.getUserInfo.avatar" style="    margin-top: -5px;"></el-avatar>
            </div>
            <el-dropdown>
              <el-button class="userInfo">
                {{ $store.getters.getUserInfo.username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <a href="#" @click="goUser" style="  text-decoration: none !important;">个人中心</a>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="checkPermission"><a href="#" @click="goadmin"
                      style="  text-decoration: none !important;">后台管理</a>
                  </el-dropdown-item>
                  <el-dropdown-item><a href="#" @click="exit" style="  text-decoration: none !important;">退出登录</a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </nav-bar-item>
    </NavBar>
  </div>
</template>

<script>
import NavBar from "@/common/NavBar/NavBar.vue";
import NavBarItem from "@/common/NavBar/NavBarItem.vue";
import { resetRouter } from "@/router"
export default {
  data() {
    return {};
  },
  components: {
    NavBar,
    NavBarItem,
  },
  computed: {
    checkPermission() {
      let promiseCode = ['admin', 'superAdmin']
      let roles = this.$store.getters.getUserInfo.roles
      let flag = false
      for (let i = 0; i < roles.length; i++) {
        if (promiseCode.includes(roles[i].code)) {
          flag = true
          break
        }
      }
      return flag
    }
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    goadmin() {
      this.$router.push("/admin/dashboard");
    },
    exit() {
      this.$store.commit("setToken", "");
      this.$store.commit("setUserInfo", {});
      this.$store.commit("setUserMenu", {});
      window.sessionStorage.clear();
      window.localStorage.clear();
      // 路由重置
      resetRouter()
      console.log(this.$router);
      this.$router.push("/home");
      location.reload();
    },
    goUser() {
      this.$router.push({
        path: "/userInfo",
      });
    },
  },
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none !important;
  color: #603266;
}

a:hover {
  text-decoration: none !important;
  color: #66b1ff;
}

.userInfo {
  background: transparent;
  border: none;
}
</style>
